<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>美兰数据文化馆与图书馆</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/public.css" media="all">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/huazhi/images/favicon.ico"/>
    <style>
        .pss{
            padding-top: 4px;
        }
        /* 数据概览 */
        .layadmin-dataview{height: 332px !important;}
        .layadmin-dataview>*[carousel-item]:before{display: none;}
        .layadmin-dataview>*[carousel-item]>div{height: 332px;}

    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <ul class="layui-row layui-col-space10 layui-this">
                        <li class="layui-col-xs3">
                            <h3>今日入库</h3>
                            <p class="pss">
                                <cite style="color: #ff671d;font-size: 20px;font-style: normal;font-weight: 100;"
                                      id="todayIn"></cite>
                            </p>
                        </li>
                        <li class="layui-col-xs3">
                            <h3>总入库</h3>
                            <p class="pss">
                                <cite id="allIn"
                                      style="color: #ff671d;font-size: 20px;font-style: normal;font-weight: 100;"></cite>
                            </p>
                        </li>
                        <li class="layui-col-xs3">
                            <h3>今日出库预警</h3>
                            <p class="pss">
                                <cite id="todayOut"
                                      style="color: #ff671d;font-size: 20px;font-style: normal;font-weight: 100;"></cite>
                            </p>
                        </li>
                        <li class="layui-col-xs3">
                            <h3>累计出库预警</h3>
                            <p class="pss">
                                <cite id="allOut"
                                      style="color: #ff671d;font-size: 20px;font-style: normal;font-weight: 100;"></cite>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">部门负责数量与使用数量</div>
                <div class="layui-card-body">

                    <div id="categoryBi" class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                         lay-filter="LAY-index-normcol">

                    </div>

                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">最近一周出库预警统计图</div>
                <div class="layui-card-body">

                    <div id="weekCount" class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                         lay-filter="LAY-index-heapcol">

                    </div>

                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">物资一年出入库统计图</div>
                <div class="layui-card-body">

                    <div id="dayOfMonth" class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                         lay-filter="LAY-index-normbar">

                    </div>

                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">物资累计异常出库列表</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                         lay-filter="LAY-index-heapbar">
                        <table id="accumulative" lay-filter="accumulatives"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.all.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table','echarts'], function () {
        var $ = layui.$
            , table = layui.table,
            echarts=layui.echarts;

        var limitcount = 10;
        table.render({
            elem: '#accumulative'
            , url:"<%=request.getContextPath()%>/rest/reporting/getBi4"
            ,title:"物资累计异常出库列表"
            , page: false
            , limit: limitcount
            , text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
            , cols: [[
                // {type: 'checkbox'}
                {field: 'epcCode', title: 'EPC标签',width:235}
                , {field: 'name', title: '物资名称'}
                , {field: 'responsible', title: '负责人员'}
                , {field: 'ownDep', title: '负责部门'}
                , {field: 'count', title: '报警次数'}
            ]],
            done: function (res, curr, count) {
            }
        });

        $.post("<%= request.getContextPath()%>/rest/reporting/getIndexData", {},
            function (data) {
                if (data != null) {
                    $("#rightValue1").html(data[0][0]);
                    $("#rightValue0").html(data[0][1]);
                    $("#todayOut").html(data[1][0]);
                    $("#allOut").html(data[2][0]);
                    $("#todayIn").html(data[1][1]);
                    $("#allIn").html(data[2][1]);
                }
            })


        var div3 = document.getElementById('categoryBi')
        var echart3 = echarts.init(div3)

        $.ajaxSetup({
            async : false
        });
        $.post("<%=request.getContextPath()%>/rest/reporting/getDepartmentBi", {}, function (data) {
            if (data != null) {

                option = {
                    color : ['#88bef5','#ba53de'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['负责数量', '使用数量']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {show: false},
                            data: data[0]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '负责数量',
                            type: 'bar',
                            barGap: 0,
                            data: data[1],
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            }
                        },
                        {
                            name: '使用数量',
                            type: 'bar',
                            data: data[2],
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            }
                        }
                    ]
                };

                echart3.setOption(option);
                echart3.hideLoading();
            }})


        var div2 = document.getElementById('dayOfMonth')
        var echart2 = echarts.init(div2)

        $.ajaxSetup({
            async : false
        });
        $.post("<%=request.getContextPath()%>/rest/reporting/getBi3", {}, function (data) {
            if (data != null) {

                var dataIn = data[1]
                var dataOut = data[0]
                var months = data[2]

                var colors = ['#5793f3', '#d14a61'];

                option = {
                    color: colors,
                    legend: {
                        data:['出库','入库']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel:{
                                interval: 0,
                                rotate:40
                            },
                            data: months
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量',
                            min:0,
                            position: 'left',
                            axisLine: {
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} 个'
                            }
                        }

                    ],

                    series: [
                        {
                            name:'出库量',
                            type:'bar',
                            data:dataOut,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                        },
                        {
                            name:'入库量',
                            type:'bar',
                            data:dataIn,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                        }
                    ]
                };


                echart2.setOption(option);


            }
        }, "json")


        $.post("<%= request.getContextPath()%>/rest/reporting/getIndexBi2", {},
            function (data) {
                if (data != null) {
                    var chart2 = document.getElementById('weekCount');
                    var echart2 = echarts.init(chart2);
                    option2 = {
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '1%',
                            distance: 18,

                            containLabel: true
                        },
                        xAxis: [{
                            type: 'value',

                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                alignWithLabel: true
                            }
                        }],
                        yAxis: [{
                            type: 'category',
                            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],

                            splitLine: {
                                show: false
                            },
                            splitArea: {
                                show: false,
                            },
                        }],
                        series: [{
                            name: '数量',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    // 随机显示
                                    //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                    // 定制显示（按顺序）
                                    color: function (params) {
                                        var colorList = ['#4F81BD', '#C0504D', '#876DA7',  '#4BACC6','#88bef5','#ba53de','#f469a9','#ef9b59','#769353','#64bd97','#ff4b68'];
                                        var n = Math.floor(Math.random() * colorList.length + 1)-1;
                                        return colorList[n]
                                    }
                                },
                            },
                            data: data
                        }]
                    };

                    echart2.setOption(option2);
                    echart2.hideLoading();

                }
            })

    });

</script>
</body>
</html>


